<template>
    <div>
        <el-row :model="search">
            <el-col :span="6">
                <el-input placeholder="请按姓名搜索" v-model="search.input1" clearable>
                </el-input>
            </el-col>
            <el-col :span="6">
                <el-input placeholder="请按部门名称搜索" v-model="search.input2" clearable>
                </el-input>
            </el-col>
            <el-col :span="6">
                <el-input placeholder="请按科室名称搜索" v-model="search.input3" clearable>
                </el-input>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" icon="el-icon-search" @click="searchInfor">搜索</el-button>
            </el-col>
        </el-row>
        <br><br>
        <el-table :data="nurseList" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column prop="nid" label="编号" width="80">
            </el-table-column>
            <el-table-column prop="nname" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="nsex" label="性别">
            </el-table-column>
            <el-table-column prop="dename" label="部门名称">
            </el-table-column>
            <el-table-column prop="kname" label="科室名称">
            </el-table-column>
            <el-table-column prop="nphone" label="联系方式">
            </el-table-column>
            <el-table-column prop="nidentify" label="身份证号">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row.nid)">修改</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row.nid)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br><br>
        <el-button type="warning" @click="addDialogVisible = true" class="add">添加护士</el-button>
        <el-dialog title="添加护士" :visible.sync="addDialogVisible" style="text-align: left">
            <el-form :model="newNurse" label-width="100px">
                <el-form-item label="姓名">
                    <el-input v-model="newNurse.nname"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="newNurse.nidentify"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio v-model="newNurse.nsex" label="男">男</el-radio>
                    <el-radio v-model="newNurse.nsex" label="女">女</el-radio>
                </el-form-item>
                <el-form-item label="部门名称">
                    <el-select v-model="newNurse.deid" placeholder="请选择部门">
                        <el-option v-for="dept in deptList" :key="dept.deid" :label="dept.dename" :value="dept.deid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="科室名称">
                    <el-select v-model="newNurse.kid" placeholder="请选择科室">
                        <el-option v-for="keshi in keshiList" :key="keshi.kid" :label="keshi.kname" :value="keshi.kid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="newNurse.nphone"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addNurse">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改护士信息" :visible.sync="addDialogVisible2" style="text-align: left">
            <el-form :model="newNurse2" label-width="100px">
                <el-form-item label="姓名">
                    <el-input v-model="newNurse2.nname"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="newNurse2.nidentify"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio v-model="newNurse2.nsex" label="男">男</el-radio>
                    <el-radio v-model="newNurse2.nsex" label="女">女</el-radio>
                </el-form-item>
                <el-form-item label="部门名称">
                    <el-select v-model="newNurse2.deid" placeholder="请选择部门">
                        <el-option v-for="dept in deptList" :key="dept.deid" :label="dept.dename" :value="dept.deid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="科室名称">
                    <el-select v-model="newNurse2.kid" placeholder="请选择科室">
                        <el-option v-for="keshi in keshiList" :key="keshi.kid" :label="keshi.kname" :value="keshi.kid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="newNurse2.nphone"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible2 = false">取消</el-button>
                <el-button type="primary" @click="updateNurse">确定</el-button>
            </div>
        </el-dialog>
        <div class="block" style="margin-top: 10px; margin-left: 300px">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="pageInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            search: {
                input1: "",
                input2: "",
                input3: ""
            },
            newNurse:{
                nid: "",
                nname: "",
                nsex: "",
                nphone: "",
                nidentify: "",
                deid: "",
                kid: "",
            },
            newNurse2:{
                nid: "",
                nname: "",
                nsex: "",
                nphone: "",
                nidentify: "",
                deid: "",
                kid: "",
            },
            addDialogVisible: false,
            addDialogVisible2: false,
            deptList: [],
            dept: {},
            keshi: {},
            keshiList: [],
            nurseList: [],
            pageInfo: {
                pageNum: 1,
                pageSize: 5,
            },
            input1: "",
            input2: "",
            input3: ""
        }
    },
    methods: {
        updateNurse(){
            this.$axios.put("nurse/update", this.newNurse2)
                .then((result) => {
                    let vo = result.data;
                    this.$message = vo.message;
                    if (vo.code == 200) {
                        this.addDialogVisible2 = false;
                        this.list();
                    }
                })
        },
        handleEdit(nid) {
            this.addDialogVisible2 = true;
            this.$axios.get("nurse/getById?nid=" + nid)
                .then((result) => {
                    let vo = result.data;
                    if (vo.code == 200) {
                        this.newNurse2 = vo.data;
                    }
                })
        },
        addNurse() {
            this.$axios.post("nurse/add", this.newNurse)
                .then((result) => {
                    let vo = result.data;
                    this.$message = vo.message;
                    if (vo.code == 200) {
                        this.addDialogVisible = false;
                        this.list();
                    }
                })
        },
        handleDelete(nid) {
            this.$axios.delete("nurse/delete?nid=" + nid)
                .then((result) => {
                    let vo = result.data;
                    if (vo.code == 200) {
                        this.list();
                    }
                })
        },
        searchInfor() {
            this.$axios.get("nurse/getByCondition?nname=" + this.search.input1 + "&dename=" + this.search.input2 + "&kname=" + this.search.input3)
                .then((result) => {
                    let vo = result.data;
                    if (vo.code == 200) {
                        this.nurseList = vo.data;
                        this.search={
                            input1: "",
                            input2: "",
                            input3: ""
                        }
                    }
                })
        },
        handleSizeChange(val) {
            this.pageInfo.pageSize = val;
            this.list();
        },
        handleCurrentChange(val) {
            this.pageInfo.pageNum = val;
            this.list();
        },
        list() {
            this.$axios.get("nurse/getAll?pageNum=" + this.pageInfo.pageNum + "&pageSize=" + this.pageInfo.pageSize)
                .then((result) => {
                    let vo = result.data;
                    if (vo.code == 200) {
                        this.nurseList = vo.data.list;
                        this.pageInfo = vo.data;
                    }
                })
        },
        tableRowClassName({ rowIndex }) {
            if (rowIndex % 2 == 0) {
                return 'warning-row';
            } else {
                return 'success-row';
            }
        }
    },
    mounted() {
        this.list();
        this.$axios.get("dept/getAll")
            .then((result) => {
                let vo = result.data;
                if (vo.code == 200) {
                    this.deptList = vo.data;
                }
            }),
            this.$axios.get("keshi/getAll")
                .then((result) => {
                    let vo = result.data;
                    if (vo.code == 200) {
                        this.keshiList = vo.data;
                    }
                })
    }
}

</script>

<style>
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}

.add {
    margin-left: 10px;
}
</style>
